<template>
	<view>
		<u-sticky offset-top="0">
			<view class="top-s">
				<u-search :showAction="true" actionText="搜索" :animation="true"></u-search>
				<u-tabs :list="list" :scrollable='false' lineColor='rgb(46,167,128)' lineWidth='60'
					@click="click"></u-tabs>
			</view>
		</u-sticky>

		<view class="content">
			<view class="list" @click="handleNavToForm" v-for="(item,index) in 20">
				<view class="code">编号：51515151516</view>
				<view class="name">
					<text class="l">
						【设备维修】
					</text>
					<text class="n">景区A区建筑倒塌</text>
					<text class="r">
						<u-tag text="紧急" size='mini' type="error"></u-tag>
					</text>
				</view>
				<view class="desc">
					电梯坏了，速度找人来修理
				</view>
				<view class="time">
					<text>2024-09-09 14：22：33</text>
					<view class="r">
						<u-tag text="进行中" type="warning" plain plainFill></u-tag>
						<!-- 		<u-tag text="标签" type="success" plain plainFill></u-tag>
				<u-tag text="标签" type="error" plain plainFill></u-tag> -->
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待处理'
				}, {
					name: '审核中'
				}, {
					name: '已完成'
				}],
				current: 1
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			handleNavToForm() {
				uni.navigateTo({
					url: '/pages/fault/faultForm/faultForm'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100vh;
		background-color: $uni-color-bg;
	}

	.top-s {
		background-color: #fff;
		padding: 22upx 30upx;
		box-sizing: border-box;
	}

	.content {
		.list {
			padding: 22upx 30upx;
			box-sizing: border-box;
			background-color: #fff;
			font-size: 32upx;
			margin-bottom: 22upx;

			// border-bottom: 1upx solid $uni-border-color;
			.code {
				color: $uni-color-bg-z;
			}

			.name {
				display: flex;
				margin: 16upx 0;

				.l {
					font-weight: 600;
					color: #333;
					font-size: 36upx;
				}

				.n {
					color: #333;
					margin: 0 12upx;
				}

				.r {
					margin-left: auto;
				}
			}

			.desc {
				color: #666;
				font-size: 28upx;
			}

			.time {
				font-size: 26upx;
				color: #999;
				margin-top: 16upx;
				display: flex;
				align-items: center;

				.r {
					margin-left: auto;
				}
			}
		}
	}
</style>